<template>
    <div>
        <div class="mainbody">
            <h3>修改密码</h3>
            <el-form :model="changePwdForm" ref="changePwdform" label-width="80px" style='width:600px;' :rules='changePwdRules'>
                <el-form-item label="旧密码" prop='oldPwd'>
                    <el-input v-model="changePwdForm.oldPwd"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop='newPwd'>
                    <el-input v-model="changePwdForm.newPwd"></el-input>
                </el-form-item>
                <el-form-item style='float:right;'>
                    <el-button type="primary" @click="changePwd">修改密码</el-button>
                </el-form-item>
            </el-form>
            
            
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            changePwdForm:{
                oldPwd:'',
                newPwd:''
            },
            changePwdRules: {
                oldPwd: [
                    { required: true, message: "旧密码不能为空", trigger: "blur" },
                    { min: 6, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
                ],
                newPwd: [
                    { required: true, message: "新密码不能为空", trigger: "blur" },
                    { min: 6, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
                ]
            },
        }
    },
    methods:{
        changePwd(){
            var params = new URLSearchParams();
            params.append("oldpwd", this.changePwdForm.oldPwd);
            params.append("newpwd", this.changePwdForm.newPwd);
            this.$http.post('/client/client_detail/'+this.$store.state.userid+'/editpwd',params).then(res=>{
                // window.console.log(res)
                if(res.data.msg === '修改成功'){
                    this.$message.success('修改成功')
                    this.$router.push('/login')
               }else{
                   this.$message.error('修改失败')
                   this.oldPwd = ''
                   this.newPwd = ''
               }
            })
        }
    }
    
}
</script>
<style scoped>
    .mainbody{
        height: 100%;
        text-align: center;
        margin-top: 150px;
    }
    .el-form{
        position: relative;
        padding-left: 120px;
    }
</style>